<template>
    <div class="pos-fix-B flex coment">
      <span class="flex-dir-center" v-for="(item,index) in tab" :key="index" @click="tabClick(item)">
        <van-icon :name="item.name" :size="item.size" :color="item.color" v-if="item.name!='chat-o'"/>
        <van-icon :name="item.name" :size="item.size" :color="item.color" :badge="item.badge" v-else/>
        <span :style="{color:item.color}">{{item.content}}</span>
      </span>
    </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return{
      tab:[
        {
          id:0,
          name:'wap-home-o',
          size:'30px',
          color:'#03f',
          content:'首页',
          path:'/home',
        },
        {
          id:1,
          name:'orders-o',
          size:'30px',
          color:'#000',
          content:'列表',
          path:'/list',
        },
        {
          id:2,
          name:'chat-o',
          size:'30px',
          color:'#000',
          badge:'1',
          content:'消息',
          path:'/news',
        },
        {
          id:3,
          name:'user-o',
          size:'30px',
          color:'#000',
          content:'我的',
          path:'/mine',
        },
      ]
    }
  },
  created(){
    //初始化数据
    this.tabInti()
  },
  methods:{
    //底部状态栏点击按钮
    tabClick(data){
      console.log(data)
      this.tab.forEach(item=>{
        if(item.id==data.id){
          item.color='#03f'
        }else if(item.color=='#03f'){
          item.color="#000"
        }
      })
      this.$router.push(data.path)
    },
    //底部状态初始化
    tabInti(){
      let hrefArr
      if(window.location.href.indexOf('/')!=-1){
        hrefArr=window.location.href.split('/')
      }
      let path="/"+hrefArr[hrefArr.length-1]
      this.tab.forEach(item=>{
        if(item.path==path){
          item.color='#03f'
        }else if(item.color=='#03f'){
          item.color="#000"
        }
      })

    }
  }
}
</script>
<style scoped>
.coment{
  background-color: #fff;
  width:100%;
  padding: 10px 0;
  height: 7vh;
}
</style>